<{include file="www/header.tpl"}>
<script type="text/javascript" src="/resource/skin/js/jquery.qqFace.js"></script>
<script type="text/javascript">

function talk_img_click (item)
{
    var src = $(item).attr('src');
    talk_post_message('image', src);
}

function talk_post_message (type, msg)
{
    var uid = $("#uid").val();
    if (type == 'image')
        var param = { 'img' : msg,'uid':uid };
    else
        var param = { 'txt' : msg,'uid':uid };

    $.post('/chat/api', param, function (o) {
        if (o.status == 0)
        {
            //$('#chatList').html($('#chatList').html() + o.html);
            reload_chat_content();
        }
    }, 'json');
}

$(function(){
	$('.emotion').qqFace({
		id : 'facebox', //表情盒子的ID
		assign:'saytext', //给那个控件赋值
		path:'/resource/skin/face/'	//表情存放的路径
	});

    var bb = setInterval(reload_chat_content, 2000);
});

function reload_chat_content ()
{
    var uid = $("#uid").val();
    $.get('/chat/refresh/'+uid, function (o) {
        if (o.status == 0)
        {
            $('#chatList').html(o.html);
        }
    }, 'json');
}

function submit_send_comments() {
    var str = $("#saytext").val();
    if (str)
    {
        $('#saytext').val('');
        talk_post_message('text', str);
        $("html, body").animate({
        scrollTop: $("#chatList").height()
        }, 30);
    }
    if (!str) {
        alert('请输入评论');
        return false;
    }
}

function enter_send_comments() {

    var event = window.event || arguments.callee.caller.arguments[0];
    if (event.keyCode == 13) {
         submit_send_comments();
    }
}

//查看结果
function replace_em(str){
	str = str.replace(/\</g,'&lt;');
	str = str.replace(/\>/g,'&gt;');
	str = str.replace(/\n/g,'<br/>');
	str = str.replace(/\[em_([0-9]*)\]/g,'<img src="face/$1.gif" border="0" />');
	return str;
}
</script>
<style>

#chatList { width: 100%; margin-top: 18px; padding: 10px 0 100px 0; overflow: scroll; font-size: 14px; }
.msg { width:100%; clear:both;  }

.msg .ll, .msg .rr { width: 50px; vertical-align: top; }
.msg .ll  { padding-left: 10px; }
.msg .rr { padding-right: 10px; }
.msg .mm { padding: 0 0 18px 0; vertical-align: top; }
.msg .avatar {width:100%; }
.msg .avatar img{width:100%;max-width:50px;clear:both;border-radius: 50%; }

.msg .message{float:left;background-color:#EFE;padding:10px;margin-left:20px;margin-right:5px;
        min-height: 50px;
        line-height: 1.5em;
        -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;position:relative;
        background-image:-moz-linear-gradient(hsla(0,0%,100%, 0.6), hsla(0, 0%, 100%, 0)  30px);
        background-image:-webkie-gradient(linear, 0 0, 0 30, from(hsla(0, 0%, 100%, 0.6)), to(hsla(0, 0%, 100%, 0)));
        -moz-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
        -webkit-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
        box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
}
.msg .messageleft{float:right;background-color:#A6DADC;padding:10px;margin-left:5px;margin-right:20px;
        min-height: 50px;
        line-height: 1.5em;
        -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;position:relative;
        background-image:-moz-linear-gradient(hsla(0,0%,100%, 0.6), hsla(0, 0%, 100%, 0)  30px);
        background-image:-webkie-gradient(linear, 0 0, 0 30, from(hsla(0, 0%, 100%, 0.6)), to(hsla(0, 0%, 100%, 0)));
        -moz-box-shadow:-2px 1px 2px hsla(0, 0%, 0%, 0.3);
        -webkit-box-shadow:-2px 1px 2px hsla(0, 0%, 0%, 0.3);
        box-shadow:-2px 1px 2px hsla(0, 0%, 0%, 0.3);
        }
.message:before{
    position:absolute;
    content:"\00a0";
    width:0px;
    height:0px;
    border-width:8px 18px 8px 0;
    border-style:solid;
    border-color:transparent #EFE transparent transparent;
    top:15px;
    left:-18px;
}
.messageleft:before{
    position:absolute;
    content:"\00a0";
    display:inline-block;
    width:0px;
    height:0px;
    border-width:8px 0px 8px 18px;
    border-style:solid;
    border-color:transparent transparent transparent #A6DADC;
    right:-18px;
    top:15px;

}



.comment{ width:100%; height: 40px; background: #474749; /*position:fixed;*/ bottom: 0; left: 0; z-index: 999; }
.com_form{ height: 40px; width:100%;  display: table; position:relative; }
.com_form .fayan { display: table-cell; font-size: 14px;  height: 40px; vertical-align: top; }

input[type="text"] { border-radius: 0; width: 100%; height: 30px; margin-top: 5px; padding-left: 10px; }

.com_form p{ height:28px; line-height:28px; position:relative; }

span.emotion { display: table-cell; width: 50px; height: 40px; background:url(/resource/skin/face/icon.png) 10px 8px no-repeat; background-size: 25px 25px; }

.qqFace{ margin-top:-160px; margin-left: 5px; background:#fff;padding:2px;border:1px #dfe6f6 solid;}

.qqFace table td{padding:0px;}

.qqFace table td img{cursor:pointer;border:1px #fff solid;}

.qqFace table td img:hover{border:1px #0066cc solid;}

.sub_btn {
    border-radius: 0;
    display: table-cell;
    width: 30px;
    height: 30px; margin-top: 5px; background:url(/resource/skin/face/sub_btn.png) no-repeat; background-size: 30px 30px;
}

</style>
<div style="width: 50%;">
    该写啥写啥
</div>
<div style="width: 50%;float: right">
    <div id="chatBox">
        <table id="chatList">
            <{foreach from=$chatList.list item="msg"}>
            <{include file="app/chat/message.tpl"}>
            <{/foreach}>
        </table>

        <div class="comment">
            <div class="com_form">
                <span class="emotion"></span>
            <span class="fayan">
                <input type="text" id="saytext" onkeydown="enter_send_comments();" name="saytext" placeholder="请输入文字">
            </span>
                <input type="hidden" id="uid" name="uid" value="<{$uid}>"/>
                <input type="submit" onclick="submit_send_comments();" value="" class="sub_btn">
            </div>
        </div>
    </div>
</div>
<div style="clear: both;"></div>
<{include file="www/footer.tpl"}>
